<template>
	<div class="statistical-other-evidence-container">
		<el-form :inline="true" :model="query" size="mini">
			<el-form-item label-width="100px" label="单位类型：">
				<el-radio-group v-model="query.organType">
					<el-radio-button :label="1">录入单位</el-radio-button>
					<el-radio-button :label="2">主办单位</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label-width="100px" label="单位名称：">
				<el-cascader :options="organData" :props="elselectSingle" ref="refelOrgan" clearable placeholder="请选择..." />
			</el-form-item>
			<el-form-item label-width="100px" label="时间类型：" style="display:none;">
				<el-radio-group v-model="query.cType">
					<el-radio-button :label="1">登记时间</el-radio-button>
					<el-radio-button :label="2">提取时间</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label-width="100px" label="登记时间：">
				<el-date-picker
					v-model="query.cTimeAll"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					type="daterange"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item style="margin-left: 20px">
				<el-button type="primary" @click="statistics" icon="el-icon-search" size="small">查询</el-button>
				<el-button type="success" plain @click="onExportExcel" icon="el-icon-document" size="small">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table
			id="tablePersonExcel" border
			ref="singleTableRef"
			:data="tableData"
			:row-style="{ height: '40px' }"
			:cell-style="{ padding: '0' }"
			size="medium"
			show-summary
			:summary-method="getSummaries"
			style="width: 100%"
			highlight-current-row
		>
			<el-table-column align="center" label="序号" type="index" width="60" />
			<el-table-column align="center" property="organName" sortable prop="organName" label="办案人" />
			<el-table-column align="center" property="register" label="已登记总数" show-overflow-tooltip >
				<template #default="scope">
					<span style="cursor: pointer;" @click="view('已登记',scope.row.organName)">{{ `${scope.row.register}` }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" property="inAll" label="已入库总数" show-overflow-tooltip >
				<template #default="scope">
					<span style="cursor: pointer;" @click="view('入库合计',scope.row.organName)">{{ `${scope.row.inAll}` }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" property="outAll" label="已出库总数" show-overflow-tooltip >
				<template #default="scope">
					<span style="cursor: pointer;" @click="view('已出库总数',scope.row.organName)">{{ `${scope.row.outAll}` }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" property="allCount" sortable label="合计" show-overflow-tooltip >
				<template #default="scope">
					<span style="cursor: pointer;" @click="view('合计总数',scope.row.organName)">{{ `${scope.row.allCount}` }}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, h, VNode } from 'vue';
import { statisticsPersonEvidence,getOrganTree } from '/@/api/statistics/index';
import type { ElTable } from 'element-plus';
import { exportExcel } from '/@/common/excel';
import { useRouter } from 'vue-router';

export default {
	name: 'statisticalPersonEvidence',
	setup() {
		const elselectSingle = {
			checkStrictly: true,
		};
		const router = useRouter();
		const state = reactive({
			organData: [],
			query: {
				cType: 1,
				organType:1,
				cTimeStart: null,
				cTimeEnd: null,
				cTimeAll: null,
				currentOrganId: 0,
			},
			tableData: [],
		});

		const refelOrgan = ref();
		const singleTableRef = ref<InstanceType<typeof ElTable>>();

		async function statistics() {
			state.query.cTimeStart = null;
			state.query.cTimeEnd = null;
			if (state.query.cTimeAll && state.query.cTimeAll.length > 1) {
				state.query.cTimeStart = state.query.cTimeAll[0];
				state.query.cTimeEnd = state.query.cTimeAll[1];
			}

			await statisticsPersonEvidence(state.query).then((res: any) => {
				if (res.success) {
					state.tableData = res.data;
				}
			});
		}
		function view(ty,org){
			//已登记, 已入库, 已借调, 已发还, 已移交, 已回库, 其他出库, 入库合计, 出库合计
			// 借调 1  检验 2  发还 3  销毁 4 移交 5 归还 6  更换位置7  入库8
			let _path = '/query/evidence';
			let vstatus = 0;
			switch (ty) {
				case "已入库":
					vstatus = 8;
					break;
				case "已借调":
					vstatus = 1;
					break;
				case "已发还":
					vstatus = 3;
					break;
				case "已移交":
					vstatus = 5;
					break;
				case "已回库":
					vstatus = 6;
					break;
				case "其他出库":
					vstatus = 12;
					break;
				case "入库合计":
					vstatus = 13;
					break;
				case "出库合计":
					vstatus = 14;
					break;
				case "合计总数":
					vstatus = null;
					break;		
			}
			let queryParam = {
				vstatus:vstatus,
				hostUser:org,
				rbegin:null,
				rend:null,
				tbegin:null,
				tend:null,
				orgType:state.query.organType + 1,
				organId: state.query.organType == 1? state.query.currentOrganId:0,
				hostOrgan:state.query.organType == 1?0: state.query.currentOrganId,
				a:new Date().getTime()
			};
			if(state.query.cTimeAll){
				if(state.query.cType == 1){
					if (state.query.cTimeAll.length > 1) {
						queryParam.rbegin = state.query.cTimeAll[0];
						queryParam.rend = state.query.cTimeAll[1];
					}
				}else{
					if (state.query.cTimeAll.length > 1) {
						queryParam.tbegin = state.query.cTimeAll[0];
						queryParam.tend = state.query.cTimeAll[1];
					}
				}
			}
			router.push({ 
				path: _path,
				query: queryParam
			});
		}
		const getSummaries = (param) => {
			const { columns, data } = param
			const sums: (string | VNode)[] = []
			columns.forEach((column, index) => {
				if (index === 1) {
					sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
						'合计',
					])
					return
				}
				const values = data.map((item) => Number(item[column.property]))
				if (!values.every((value) => Number.isNaN(value))) {
					sums[index] = ` ${values.reduce((prev, curr) => {
						const value = Number(curr)
						if (!Number.isNaN(value)) {
						return prev + curr
						} else {
						return prev
						}
					}, 0)}`
				} else {
					sums[index] = ''
				}
			})
			return sums
		}
		const onExportExcel = () => {
			exportExcel('tablePersonExcel', '案卷数量统计', '案卷数量统计.xlsx');
		};
		async function init() {
			await getOrganTree(state.query).then((res: any) => {
				if (res.success) {
					state.organData = [res.data];
					statistics();
				}
			});
		}
		init();
		statistics();
		return {
			statistics,
			view,
			getSummaries,
			onExportExcel,
			elselectSingle,
			refelOrgan,
			singleTableRef,
			...toRefs(state),
		};
	},
};
</script>
